import { defineStore } from "pinia";
import i18nConfig from "@renderer/assets/i18n";
import { toRaw } from "vue";

interface IAppSetting {
  appSettingVersion: string;
  theme: string;
  language: string;
  fontSize: string,
  imgRenderSetting: {
    showPercentRule: boolean,
    percentRuleColor: string,
    mprLayout: string,
  },
  crossSetting: {
    crossColor: {
      ax: string,
      sag: string,
      cor: string
    },
    crossLineWidth: number,
  },
  windowSetting: {
    [key: string]: {
      part: string,
      windowWidth: number,
      windowCenter: number,
      modality: string,
      shortcut: string
    },

  }
}

const useSystemSettingStore = defineStore("systemSetting", {
  state: () => {
    return {
      appSetting: {

      } as IAppSetting,
      connectState: true,
      mprLayoutOptions : [
        {
          icon: 'mprLayoutIcon',
          key: "a"
        },
        {
          icon: 'mprLayoutIcon1',
          key: "b"
        },
        {
          icon: 'mprLayoutIcon2',
          key: "c"
        },
        {
          icon: 'mprLayoutIcon3',
          key: "d"
        },
        {
          icon: 'mprLayoutIcon4',
          key: "e"
        }
      ],
      quickLayoutOptions : [
        {
          icon: 'quickLayoutIcon',
          key: "quick-a",
          value: '1*1'
        },
        {
          icon: 'quickLayoutIcon1',
          key: "quick-b",
          value: '1*2'
        },
        {
          icon: 'quickLayoutIcon2',
          key: "quick-c",
          value: '2*1'
        },
        {
          icon: 'quickLayoutIcon3',
          key: "quick-d",
          value: '2*2'
        },
        {
          icon: 'quickLayoutIcon4',
          key: "quick-e",
          value: "1*1"
        },
      ],
      languageOptions: ['cn', 'en'],
      crossLineWidthOptions: [1,2,3,4],
      quickLayout:  {
        icon: 'quickLayoutIcon',
        key: "quick-a",
        value: '1*1'
      },

      showSetting: {
        showFourConner: true,
        showPercentRule: true,
        deIdentificationShow: false,
        showPseudoStrip: true,
        showDicomOverlay: false,
        showAlignmentLine: false,
        windowAutosize: true,
      }
    };
  },
  getters:{
    language: state => {
      return state.appSetting.language
    },
    crossColor:state => {
      return state.appSetting.crossSetting.crossColor
    },
    crossLineWidth:state => {
      return state.appSetting.crossSetting.crossLineWidth
    },
    percentRuleColor:state => {
      return state.appSetting.imgRenderSetting.percentRuleColor
    },
    showPercentRule:state => {
      return state.appSetting.imgRenderSetting.showPercentRule
    },
    mprLayout : state => {
      const arr = state.mprLayoutOptions.filter(layout => layout.key === state.appSetting.imgRenderSetting.mprLayout)
      return arr[0]
    },
    windowSetting: state => {
      return state.appSetting.windowSetting
    }
  },
  actions: {
    updateConnectState(newState: boolean) {
      this.connectState = newState;
    },
    initSettingFromMain() {
      const localSetting = (window as any).localStore.getBatch([
        "appSetting",
      ]);
      // i18nConfig.global.locale.value = localSetting.language;
      // document.documentElement.setAttribute("data-theme", localSetting.theme);
      // document.documentElement.style.fontSize = localSetting.fontSize + 'px'
      this.appSetting = localSetting.appSetting;
    },
    // updateTheme(newTheme: string) {
    //   Object.assign(this.appSetting, {
    //     theme: newTheme,
    //   });
    //   (window as any).localStore.set("theme", newTheme);
    //   document.documentElement.setAttribute("data-theme", newTheme);
    // },
    updateDefaultLanguage(newLanguage) {
      Object.assign(this.appSetting, {
        language: newLanguage,
      });
      i18nConfig.global.locale.value = newLanguage;
     (window as any).localStore.set("appSetting.language", newLanguage);
     },
    setQuickLayout(key,value = ''){
      const arr =  this.quickLayoutOptions.filter(layout => layout.key === key)
      this.quickLayout = {
        ...arr[0],
        value
      }
    },
    updateImgRenderSetting(key,value){
      Object.assign(this.appSetting.imgRenderSetting, {
        [key]: value,
      });
    },
    updateDefaultImgRenderSetting(key,value) {
      console.log('updateDefaultImgRenderSetting', key, value);
      Object.assign(this.appSetting.imgRenderSetting, {
        [key]: value,
      });
      (window as any).localStore.set(`appSetting.imgRenderSetting.${key}`, value);
    },
    updateDefaultCrossSetting(key1,key2,value) {
      if (key2 === ''){
        Object.assign(this.appSetting.crossSetting, {
          [key1]: value,
        });
      }else {
        Object.assign(this.appSetting.crossSetting[key1], {
          [key2]: value,
        });
      }

      (window as any).localStore.set(`appSetting.crossSetting`, toRaw(this.appSetting.crossSetting));
    },
    updateShowSettingVal( key, val){
      if (key === 'showPercentRule'){
        console.log('showPercentRule', val);
      }
      this.showSetting[key] = val
    },
    reset() {
      (window as any).localStore.reset('appSetting');
      this.initSettingFromMain()
    }
  },
});

export { useSystemSettingStore };
